<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .search_history .search_title {
        	height: 35px;
        	line-height: 41px;
        	padding: 0 15px;
        	font-size: 12px;
        	color: #333;
        }
        .search_history .main {
        	background-color: #fff;
        }
        .search_history .main ul li {
        	height: 50px;
        	line-height: 50px;
        	border-bottom: 1px solid #e8e8e8;
        	font-size: 15px;
        	color: #333;
        	padding: 0 15px;
        	overflow: hidden;
        	text-overflow: ellipsis;
        	white-space: nowrap;
        }
        .search_history .main ul li:last-child {
        	border-bottom: none;
        }
        .search_content {
            display: none;
        }
        .search_content .search_title {
			height: 35px;
			line-height: 35px;
			font-size: 12px;
			text-align: center;
        	color: #333;
        }
        .search_content .main {
			background-color: #fff;
        }
        .search_content .main ul li .li_box {
			padding: 10px 15px;
			box-sizing: border-box;
        	border-bottom: 1px solid #e8e8e8;
        }
        .search_content .main ul li .li_box .li_boxt {
        	display: -webkit-box;
        	display: -webkit-flex;
        }
        .search_content .main ul li .li_box .li_boxb {
            padding-top: 10px;
        }
        .search_content .li_img {
        	width: 82px;
        	height: 59px;
        	border-radius: 5px;
        	overflow: hidden;
        }
        .search_content .li_img img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        .search_content .li_info {
        	padding-left: 10px;
        	box-flex:1;
			-webkit-box-flex:1; 
			flex:1;
			-webkit-flex:1; 
        }
        .search_content .li_info .title_box {
        	overflow: hidden;
        }
        .search_content .li_info .title_box .title {
        	float: left;
        	font-size: 16px;
        	color: #333;
        	overflow: hidden;
        	text-overflow: ellipsis;
        	white-space: nowrap;
        }
        .search_content .li_info .title_box .send {
        	float: right;
        	color: #999;
        	font-size: 12px;
        }
        .search_content .li_info .evaluate {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        	margin-bottom: 3px;
        }
        .search_content .li_info .evaluate .evaluate_img {
        	overflow: hidden;
        	margin-right: 3px;
        }
        .search_content .li_info .evaluate .evaluate_img img {
        	width: 9px;
        	float: left;
        	margin-right: 3px;
        }
        .search_content .li_info .evaluate .evaluate_img img:last-child {
        	margin-right: 0;
        }
        .search_content .li_info .evaluate .evaluate_num {
        	font-size: 12px;
        	margin-right: 14px;
        	color: #999;
        }
        .search_content .li_info .evaluate .month_sell {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	font-size: 12px;
        	color: #999;
        }
        .search_content .li_info .distance {
        	font-size: 12px;
        	color: #999;
        }
        .search_content .li_discount {
        	font-size: 12px;
        	color: #999;
        }
        .search_content .li_discount span {
        	width: 16px;
        	height: 16px;
        	line-height: 16px;
        	text-align: center;
        	background-color: #ff5f78;
        	color: #fff;
        	display: inline-block;
        	border-radius: 3px;
        	margin-right: 5px;
        }
        .without_data{
            text-align: center;
            display: none;
            background: #f8f8f8;
            color: #999;
            line-height: 30px;
        }
        .without_data img{
            display: block;
            margin:0 auto;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="search_history">
    	<div class="search_title">搜索历史</div>
    	<div class="main">
    		<ul id="search_ul">
    			<!-- <li>店铺名称</li> -->
    		</ul>
    	</div>
    </div>
    <div class="search_content">
    	<div class="search_title">搜索到<span class="search_count">0</span>个结果</div>
    	<div class="main">
    		<ul id="shop_ul">
<!--     			<li>
	    			<div class="li_box">
	    				<div class="li_boxt">
	    					<div class="li_img">
	    						<img src="../image/temp/1.png">
	    					</div>
	    					<div class="li_info">
	    						<div class="title_box">
		    						<div class="title">商家名称</div>
		    						<div class="send">20元起送</div>
	    						</div>
	    						<div class="evaluate">
									<div class="evaluate_img">
										<img src="../image/evaluate_on.png">
										<img src="../image/evaluate_on.png">
										<img src="../image/evaluate_on.png">
										<img src="../image/evaluate_on.png">
										<img src="../image/evaluate_off.png">
									</div>
									<div class="evaluate_num">4.6</div>
									<div class="month_sell">月售109单</div>
	    						</div>
	    						<div class="distance">距离0.43km | 配送费 6元</div>
	    					</div>
	    				</div>
	    				<div class="li_boxb">
	    					<div class="li_discount"><span>减</span>满30减10，满40减15</div>
	    				</div>
	    			</div>
	    		</li> -->
    		</ul>
            <div class="without_data"><img src="../image/emptysearch.png"></div>
    	</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="searchTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it.length;i++){ }}
        <li onclick="fnChoseHistory(this);" tapmode>{{=it[i]}}</li>
    {{ }; }}
</script>
<script id="shopTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it.length;i++){ }}
        <li onclick="fnOpenSeller({{=it[i]['id']}});" tapmode>
            <div class="li_box">
                <div class="li_boxt">
                    <div class="li_img">
                        <img src="../image/default.png">
                        <img onload="setImg(this);" class="hidden_img" src="{{=formatVideoImg(it[i]['img'])}}">
                    </div>
                    <div class="li_info">
                        <div class="title_box">
                            <div class="title">{{=it[i]['name']}}</div>
                            <div class="send">RM{{=it[i]['start_delivery']}}起送</div>
                        </div>
                        <div class="evaluate">
                            <div class="evaluate_img">
                                {{if(it[i]['full_star'] > 0){  }}
                                    {{ for(var j=0;j<it[i]['full_star'];j++){ }}
                                        <img src="../image/evaluate_on.png">
                                    {{ }; }}
                                {{ }; }}
                                {{if(it[i]['half_star'] > 0){  }}
                                    <img src="../image/evaluate_half.png">
                                {{ }; }}
                                {{if(it[i]['off_star'] > 0){  }}
                                    {{ for(var j=0;j<it[i]['off_star'];j++){ }}
                                        <img src="../image/evaluate_off.png">
                                    {{ }; }}
                                {{ }; }}

                            </div>
                            <div class="evaluate_num">{{=it[i]['score_format']}}</div>
                            <div class="month_sell">月售{{=it[i]['month_sale']}}单</div>
                        </div>
                        <div class="distance">距离{{=it[i]['distance']}}km | 配送费RM {{=it[i]['express']}}</div>
                    </div>
                </div>
                <div class="li_boxb">
                    {{if(it[i]['coupon_str']){ }}
                        <div class="li_discount"><span>减</span>{{=it[i]['coupon_str']}}</div>
                    {{ }; }}
                </div>
            </div>
        </li>
    {{ }; }}
</script>
<script type="text/javascript">
    apiready = function(){
        searchHistory = $api.getStorage('search_history')||[];
        if(searchHistory) {
            appendDotData(searchHistory,'searchTpl','search_ul',true,false);
        }
        api.addEventListener({
            name: 'searchResultEvent'
        }, function(ret, err) {
            if (ret) {
                var content = ret.value.content;
                if(content) {
                    fnGetShop(content);
                }
            } 
        });

        //监控搜索
        api.addEventListener({
            name: 'toSearchEvent'
        }, function(ret, err) {
            if (ret) {
                $('.search_history').show();
                $('.search_content').hide();
                $('#search_ul').empty();
                appendDotData(searchHistory,'searchTpl','search_ul',true,false);
            } 
        });
    };

    function saveSearhContent(content) {
        searchHistory = $api.getStorage('search_history')||[]; 
        if($.inArray(content,searchHistory) == -1) {
            searchHistory.unshift(content);
            if(searchHistory.length > 20) {
                searchHistory.slice(0,20);
            }
            $api.setStorage('search_history',searchHistory);
        }
    }

    function fnChoseHistory(this_) {
        $('#shop_ul').html('');
        $(".without_data").hide();
        var text = $(this_).text();
        api.sendEvent({
            name: 'addInputVlaue',
            extra: {
                inputValue: text, 
            }
        });
        fnGetShop(text);
    }

    function fnGetShop(content) {
        $('.search_history').hide();
        $('.search_content').show();
        //服务器检索内容
        lat = $api.getStorage('now_lat');
        lng = $api.getStorage('now_lng');
        if(!lat) {
            return;
        }
        openLoading();
        api.ajax({
            url: rootPath+'/api/shop/search_shop',
            method: 'get',
            data: {
                values: { 
                    search: content,
                    lat : lat,
                    lng : lng
                },
               
            }
        }, function(ret, err) {
            if (ret) {
                var result_count = ret.count?ret.count:0;
                if(result_count == 0){
                    $(".without_data").show();
                }else{
                    $(".without_data").hide();
                }
                $('.search_count').text(result_count);
                $('#shop_ul').empty();
                appendDotData(ret.data,'shopTpl','shop_ul',true,false);
                saveSearhContent(content);
            } else {
                
            }
            closeLoading();
        });
    }
</script>
</html>